/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
$icon-hover-color: #1c435c;
$dashboard-tab-bg: #fff;
$dashboard-tab-name: #1c435c;
$dashboard-tab-name-current: $go-primary;
$tab-name-current-border: $go-primary;
$dashboard-arrow-color: $icon-color;

$dashboard-tab-height: 40px;
$dashboard-add-tab-width: 40px;
$dashboard-tab-list-toggle-width: $dashboard-add-tab-width;
$dashboard-tabs-padding: 30px;
$dashboard-tabs-border-color: #d6e0e2;
$dashboard-tabs-border-radius: 0;
$dashboard-tabs-pager-width: $dashboard-add-tab-width;
$dashboard-tab-current-marker-height: 10px;
$dashboard-tabs-box-shadow: 0 0 10px rgba(0, 0, 0, 0.21);

@keyframes candystripe {
  100% {
    background-position: -100px 0;
  }
}

%tab-buttons {
  padding:      0;
  width:        $dashboard-add-tab-width;
  text-align:   center;
  flex-grow:    0;
  flex-shrink:  0;
  font-size:    14px;
  border-left:  1px solid $dashboard-tabs-border-color;
  border-right: 1px solid $dashboard-tabs-border-color;
  cursor:       pointer;
  height:       $dashboard-tab-height;

  &:active, &:focus {
    outline: 0;
  }
}

.dashboard-tabs {
  @include unselectable;

  position:         fixed;
  z-index:          6;
  top:              40px;
  left:             0;
  right:            0;
  display:          flex;
  background-color: $dashboard-tab-bg;
  border-radius:    $dashboard-tabs-border-radius;
  line-height:      $dashboard-tab-height;
  height:           $dashboard-tab-height;
  padding:          0 $dashboard-tabs-padding;
  margin-bottom:    20px;
  box-shadow:       $dashboard-tabs-box-shadow;

  &.loading {
    &:after {
      @include animation(candystripe 1s linear infinite);

      display:          inline-block;
      content:          "";
      position:         absolute;
      left:             0;
      right:            0;
      top:              100%;
      height:           5px;
      z-index:          9;
      background-size:  35px 20px, 100% 100%, 100% 100%;
      background-color: #4ad9d9;
      background-image: linear-gradient(-45deg,
        transparent 33%,
        rgba(255, 255, 255, 0.3) 33%,
        rgba(255, 255, 255, 0.3) 66%,
        transparent 66%
      );
    }
  }
}

.dashboard-tabs-sortable, .dashboard-tabs-scrollable {
  vertical-align: top;
  white-space:    nowrap;
}

.dashboard-tabs-sortable {
  overflow-y:     hidden;
  overflow-x:     auto;
  outline:        none;
  padding-bottom: 100px;
}

.dashboard-tabs-scrollable {
  height:   $dashboard-tab-height;
  overflow: hidden; // ensure scrollbars of inner container are hidden from view
  display:  flex;

  &.paged {
    .page-prev, .page-next {
      display:    block;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.21);
    }
  }
}

button {
  border-radius: 0;
}

.add-tab {
  @extend %tab-buttons;

  margin:    0 0 0 -1px;
  font-size: 16px;
  color:     $dashboard-tab-name-current;
}

.edit-dropdown {
  position:      absolute;
  top:           100%;
  left:          0;
  z-index:       9;
  background:    $dashboard-tab-bg;
  color:         $icon-color;
  border-radius: 3px;
  font-weight:   normal;
  line-height:   initial;
  box-shadow:    $dashboard-tabs-box-shadow;
}

.dashboard-tab-action {
  display:       inline-block;
  margin:        0;
  padding:       5px 15px;
  border-radius: $dashboard-tabs-border-radius;

  &:first-of-type {
    border-right: 1px solid $dashboard-tabs-border-color;
  }
}

.deny-action {
  color:        #aaa;
  border-color: #aaa;
  cursor:       not-allowed;
}

.page-prev, .page-next {
  @extend %tab-buttons;

  color:   $dashboard-arrow-color;
  display: none;
}

.page-prev {
  margin-right: -1px;
}

.page-next {
  margin-left: -1px;
}

.dashboard-tab {
  display:      inline-block;
  border-right: 1px solid $dashboard-tabs-border-color;
  padding:      0 10px;
  font-weight:  600;
  cursor:       pointer;
  position:     relative;
  white-space:  nowrap;
  height:       $dashboard-tab-height;
  outline:      none;

  &:active, &:focus {
    outline: none;
  }

  &:first-of-type {
    margin-left: 0;
    border-left: 1px solid $dashboard-tabs-border-color;
  }

  > * {
    vertical-align: top;
  }

  &.draggable-source--is-dragging {
    @include sort-cursor-active;

    &:after {
      display: none;
    }

    > * {
      visibility: hidden;
    }
  }

  &.draggable-mirror {
    background:  $dashboard-tab-bg;
    line-height: $dashboard-tab-height;
    border:      0;
    box-shadow:  0 0 10px rgba(255, 255, 255, 0.21);
    z-index:     5;
  }
}

.edit-tab {
  margin:    7px 0 10px 10px;
  font-size: 14px;
}

.tab-name {
  @include truncate-to-width($max: 210px);

  font-size:      12px;
  font-weight:    600;
  text-transform: uppercase;
  margin:         0 0 0 10px;
  display:        inline-block;
  color:          $dashboard-tab-name;
}

.current {
  cursor:        default;
  border-bottom: 3px solid $tab-name-current-border;

  .tab-name {
    color:        $dashboard-tab-name-current;
    margin-right: 0;
  }
}

.tab-dropdown-toggle {
  display:     inline-block;
  margin-left: 7px;
  cursor:      default;
}

.actionable-message {
  position:      absolute;
  top:           calc(100% + #{$dashboard-tab-current-marker-height});
  left:          30px;
  padding:       20px 50px 20px 20px;
  border:        0;
  border-radius: $global-border-radius;
  background:    #fff;
  color:         #333;
  z-index:       25;
  box-shadow:    $dashboard-tabs-box-shadow;
  line-height:   initial;

  > * {
    vertical-align: middle;
  }

  .button {
    margin:      0;
    margin-left: 10px;
    font-size:   inherit;
    padding:     5px 10px;
  }

  .btn-link {
    padding: 5px 0;
    color:   #333;
  }

  .button, .button:active, .button:focus {
    outline: 0;
  }

  &:before {
    content:       "";
    position:      absolute;
    top:           -$dashboard-tab-current-marker-height;
    left:          10px;
    width:         0;
    height:        0;
    border-bottom: $dashboard-tab-current-marker-height solid #fff;
    border-left:   $dashboard-tab-current-marker-height solid transparent;
    border-right:  $dashboard-tab-current-marker-height solid transparent;
  }
}
.save-tab-order-message {
  font-weight:  600;
  margin-right: 30px;
}

.server-error-response {
  display:     flex;
  align-items: center;

  .reason {
    display: inline-block;
  }
}

.personalization-update-failed {
  display: flex;
  .server-error-response {
    float: left;
  }
}

.tabs-list-dropdown-widget {
  margin:      0;
  padding:     0;
  display:     none;
  flex-grow:   0;
  flex-shrink: 0;
  cursor:      pointer;
  height:      $dashboard-tab-height;
  width:       $dashboard-tab-list-toggle-width;

  &.paged {
    display: block;
  }
}

.tabs-list {
  position:      absolute;
  top:           100%;
  right:         30px;
  background:    $dashboard-tab-bg;
  margin:        0;
  padding:       10px 20px;
  border-top:    1px solid $dashboard-tabs-border-color;
  border-radius: 0 0 $dashboard-tabs-border-radius $dashboard-tabs-border-radius;
  list-style:    none;
  z-index:       9;
  overflow-y:    auto;
  max-height:    65vh;
  box-shadow:    1px 5px 11px rgba(0, 0, 0, 0.21);

  li {
    @include truncate-to-width($max: 210px);

    margin:         0;
    border:         0;
    border-bottom:  1px dashed $dashboard-tabs-border-color;
    text-transform: uppercase;
    font-size:      12px;
    padding:        10px 0;
    font-weight:    600;
    color:          $dashboard-tab-name;

    &.current, &:hover {
      color: $dashboard-tab-name-current;
    }

    &:last-of-type {
      border-bottom: 0;
    }
  }
}

.tabs-list-dropdown-toggle {
  @extend %tab-buttons;

  color:       $dashboard-tab-name;
  margin-left: -1px;
}

//icons

.icon_add {
  @include icon-before($type: plus);
}

.icon_page-prev {
  @include icon-before($type: chevron-left);
}

.icon_page-next {
  @include icon-before($type: chevron-right);
}

.icon_edit {
  @include icon-before($type: pencil);

  cursor:  pointer;
  color:   $icon-color;
  display: none;

  .current & {
    color:   $go-primary;
    display: block;
  }
}

.icon_drag {
  @include sort-cursor;
  @include grip-icon;

  font-size: 12px;
  color:     #9b9b9b;

  &:active {
    @include sort-cursor-active;
  }
}

.revert {
  @include icon-before($type: close);

  position: absolute;
  right:    5px;
  top:      2px;
  cursor:   pointer;
}

.icon_alert {
  @include icon-before($type: exclamation-circle);

  margin-right: 10px;
  font-size:    150%;
  color:        map-get($foundation-palette, alert);
}

.icon_tabs-list {
  @include icon-before($type: chevron-down);

  font-size: 14px;
}

.dropdown-btn {
  @include icon-before($type: caret-down);

  cursor: pointer;

  &.deny-action {
    cursor: not-allowed;
  }
}
